<template>
	<up-popup :show="showPopup" :safe-area-inset-bottom="true" mode="bottom" :round="16" @close="closePopup">
		<view class="popup-bottom-container">
			<view class="popup-close" @click="closePopup"></view>
			<view class="ptb-40 pl-24 fs-36 font-bold">文中提及（{{ detail.relate_count }}）</view>
			<view class="popup-content plr-24 auto-height">
				<zjy-empty v-if="!detail?.relate_skus?.length && !detail?.resorts?.length" />
				<block v-else>
					<view v-if="detail?.resorts?.length">
						<view class="c-grey-86 mb-16 ml-8">景点</view>
						<view
							v-for="(item, index) in detail.resorts"
							:key="index"
							class="relate-item"
							@click="pageToScenicDetail(item.id)"
						>
							<image :src="item.cover_url" class="icon-128 radius-16" mode="aspectFill" />
							<view class="content">
								<view class="fs-28 font-bold">{{ item.name }}</view>
								<view class="mt-8">{{ scoreInCent(item.score_in_cent) }}分</view>
								<view class="c-grey-86 mt-8 text-ellipsis">{{ item.specialty }}</view>
							</view>
						</view>
					</view>
					<view v-if="detail?.relate_skus?.length">
						<view class="c-grey-86 mb-16 ml-8">产品</view>
						<view
							v-for="(item, index) in detail.relate_skus"
							:key="index"
							class="relate-item"
							@click="toProductDetail(item)"
						>
							<image :src="item.cover_url" class="icon-128 radius-16" mode="aspectFill" />
							<view class="content">
								<view class="fs-28 font-bold">{{ item.sku_name }}</view>
								<view class="mt-8">{{ scoreInCent(item.score_in_cent) }}分</view>
								<view class="c-grey-86 mt-8 text-ellipsis">{{ item.intro }}</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</up-popup>
</template>
<script setup>
import { ProductTypes } from "@/constants/common"
import { scoreInCent } from "@/mixins/mixins"
import {
	navigateTo,
	pageToCombotktDetail,
	pageToScenicDetail,
	pageToTicketDetail,
	pageToTripDetail,
} from "@/utils/page-redirect"

const props = defineProps({
	modelValue: Boolean,
	detail: {
		type: Object,
		default: {},
	},
})
const emit = defineEmits(["update:modelValue"])

const showPopup = ref(false)
watch(
	() => props.modelValue,
	(newVal) => {
		showPopup.value = !!newVal
	}
)
const toProductDetail = (item) => {
	switch (item.spu_type) {
		case ProductTypes.TICKET:
			pageToTicketDetail(item.sku_id)
			break
		case ProductTypes.COMBO_TKT:
			pageToCombotktDetail(item.sku_id)
			break
		case ProductTypes.TRIP:
			pageToTripDetail(item.sku_id)
			break
	}
}
// 处理关闭按钮点击
const closePopup = () => {
	showPopup.value = false
	emit("update:modelValue", false)
}
</script>
<style lang="scss" scoped>
.relate-item {
	display: flex;
	margin-bottom: 16rpx;
	background: #f7f8fa;
	padding: 20rpx;
	border-radius: 16rpx;
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 16rpx;
		width: calc(100% - 144rpx);
	}
}
</style>
